<template>
  <div class="assist-table">
    <el-table
      :data="playerNameSlice"
      height="797px"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
      style="width: 100%"
    >
      <el-table-column prop="rank" label="排名" width="80">
        <template slot-scope="scope">
          <svg v-if="scope.row.rank === 1" class="icon" aria-hidden="true">
            <use xlink:href="#icon-soccerjinpai"></use>
          </svg>
          <svg v-else-if="scope.row.rank === 2" class="icon" aria-hidden="true">
            <use xlink:href="#icon-socceryinpai"></use>
          </svg>
          <svg v-else-if="scope.row.rank === 3" class="icon" aria-hidden="true">
            <use xlink:href="#icon-soccertongpai"></use>
          </svg>
          <div v-else>{{ scope.row.rank }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="playerName" label="球员" width="172">
        <template slot-scope="scope">
          <div class="team-name">
            <img class="player-logo" :src="scope.row.playerImg" alt="" />
            <span class="team-name-text myColumn">
              <span
                class="team-name-text myColumn"
                @click="enterPlayer(scope.row.playerId)"
                >{{ scope.row.playerName }}</span
              >
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="teamName" label="球队" width="140">
        <template slot-scope="scope">
          <div class="team-name">
            <img class="team-logo" :src="scope.row.teamImg" alt="" />
            <span class="team-name-text myColumn">
              <span @click="enterTeam(scope.row.teamId)">{{
                scope.row.teamName
              }}</span>
            </span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="assists" label="助攻" sortable width="203">
      </el-table-column>
      <el-table-column
        prop="setAssists"
        label="定位球助攻"
        sortable
        width="203"
      >
      </el-table-column>
      <el-table-column prop="assistRatio" label="个人/球队助攻数" width="204">
        <template slot-scope="scope">
          <Progress
            :score-ratio="scope.row.scoreRatio"
            :player-score="scope.row.assists"
            :team-score="scope.row.teamAssists"
          />
        </template>
      </el-table-column>
      <el-table-column prop="scoreRatio" label="贡献率" sortable width="150">
        <template slot-scope="scope">
          {{ scope.row.scoreRatio }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Progress from "./Progress";
import axios from "axios";
import playerRadar from "../../ant_v/radarScore/PlayerRadar";
export default {
  name: "AssistsTable",
  components: {
    Progress,
  },
  props: {
    season: {
      type: String,
      default() {
        return "2019赛季";
      },
    },
  },
  watch: {
    season(newSeason, oldSeason) {
      this.getAssistsList(parseInt(newSeason));
    },
  },
  data() {
    return {
      //联赛Id
      leagueId: 6,
      //助攻榜数据
      assistsList: [],
    };
  },
  methods: {
    //设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return { "background-color": "#F1F6F9" };
    },

    //设置表头
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (
        rowIndex === 0 &&
        (columnIndex === 3 || columnIndex === 4 || columnIndex === 6)
      ) {
        return {
          "background-color": "#F1F6F9",
          "font-size": "20px",
          "padding-top": "20px",
        };
      }
      return {
        "background-color": "#F1F6F9",
        "font-size": "20px",
      };
    },

    //获取助攻榜数据
    async getAssistsList(seasonId) {
      //当前联赛Id 中超or中甲
      const leagueId = this.leagueId;
      //获取接口数据
      const { data } = await axios.get(
        `http://8.141.159.127:3000/api/v1/matches/aboutmatches/assistlist/${leagueId}/${seasonId}`
      );
      //赋值给shooterList
      this.assistsList = data;
    },
    //点击球队进入具体球队
    enterTeam(teamId) {
      this.$router.push({ name: "singleTeam", params: { teamId } });
    },
    //点击球员进入具体球员
    enterPlayer(playerId) {
      this.$router.push({ name: "singlePlayer", params: { playerId } });
    },
  },
  created() {
    this.getAssistsList(2019);
  },
  computed: {
    playerNameSlice() {
      return this.assistsList.map((player) => {
        return {
          ...player,
          playerName: player.playerName.slice(0, 5),
        };
      });
    },
  },
};
</script>

<style scoped>
.assist-table {
  width: 80%;
  margin: auto;
}
.assist-table /deep/ .el-table td {
  font-size: 18px;
  font-weight: bold;
  padding: 11px 0; /*no*/
  text-align: center;
}
.assist-table /deep/ .el-table th {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.assist-table /deep/ .is-leaf {
  padding: 13px 0; /*no*/
}
.team-name {
  display: flex;
  /*justify-content: space-around;*/
  align-items: center;
  /*margin-left: 3px;*/
  /*background-color: red;*/
}
.player-logo {
  width: 24px;
  height: 24px;
  margin-left: 24px;
}
.team-logo {
  width: 24px;
  height: 24px;
  /*margin-left: 24px;*/
}
.team-name-text {
  margin-left: 7px;
}
.active {
  color: #606266;
  text-decoration: none;
}
.icon {
  width: 30px;
  height: 30px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
